<style scoped>
</style>
<template>
  <div v-show="tableShow">
    <Table
      stripe
      border
      :height="tableHeight"
      :columns="columnsArr"
      :data="data"
      size="small"
      :tooltip-theme="menuTheme"
    ></Table>
	<div slot="footer">
	  <Button v-show="createShow" type="info" style="margin-top:5px;float: right;" @click="addFun">开始创建表</Button>
	</div>
    <Modal v-model="modal" title="创建表结构" width="950" fullscreen :mask-closable="false">
      <Spin fix v-show="addLoading"></Spin>
      <Form ref="formData" :model="formData" :label-width="80" label-colon>
        <Row type="flex" justify="start" align="middle">
          <Col span="4">
            <FormItem label="系统名称">
              <Tag color="success" size="large">{{sysName}}</Tag>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem label="表名">
              <Tag color="default">{{tableName}}</Tag>
            </FormItem>
          </Col>
          <Col span="4">
            <FormItem label="主键">
              <Select v-model="primaryKey" filterable>
                <Option v-for="(item,index) in columns" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="表注释">
              <Input type="text" v-model="tableComment" placeholder="请输入表注释" />
            </FormItem>
          </Col>
        </Row>
        <div v-for="(item,index) in formData.arr" :key="index" :value="item">
          <Row type="flex" justify="start" align="middle">
            <Col span="4">
              <FormItem :label="'字段'+(index+1)">
                <Tag color="primary">{{formData.arr[index].columnName}}</Tag>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="类型">
                <Tag color="default">{{formData.arr[index].columnType}}</Tag>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="长度">
				        <InputNumber :max="4000" :min="0" v-model="formData.arr[index].columnLength"></InputNumber>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="释义">
                <Input type="text" v-model="formData.arr[index].columnComment" placeholder="请输入释义" />
              </FormItem>
            </Col>
          </Row>
        </div>
      </Form>
      <div slot="footer">
        <Button type="info" @click="createTables()" :disabled="createButton">提交创建表</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
// 传入resultSet结果集进行展示的组件
export default {
  name: "executeResult",
  props: {
    resultSet: Object,
    menuTheme: String,
    tableName: String,
    sysName: String
  },
  data() {
    return {
      columnsArr: [
        {
          title: "序号",
          type: "index",
          width: 70,
          align: "center"
        }
      ],
      data: this.resultSet.data,
      tableShow: true,
      createShow: false,
      modal: false,
      columns: [],
      formData: {
        arr: []
      },
      tableComment: "",
      primaryKey: "",
      addLoading: false,
      createButton: false
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400;
    }
  },
  created() {
    const data = this.resultSet.data;
    if (data && data.length > 0) {
      for (let key of Object.keys(data[0])) {
        this.columns.push(key); //放入字段
        if (this.resultSet.structure && this.resultSet.structure.length > 0) {
          this.resultSet.structure.forEach(item => {
            item.columnComment = "";
          });
        }
        this.formData.arr = this.resultSet.structure; //初始化表单
        let column = {
          title: key,
          key: key,
          tooltip: true,
          width: 100,
          resizable: true
        };
        this.columnsArr.push(column);
      }
    }
   
  },
  methods: {

    //打开建表页面
    addFun() {
      this.modal = true;
    },
    //创建表结构
    async createTables() {
      this.addLoading = true;
      this.createButton = true;
      const data = {
        batchName: this.sysName,
        columnList: this.formData.arr,
        primaryKey: this.primaryKey,
        tableComment: this.tableComment,
        tableName: this.tableName
      };
      const result = await this.$api.createTable(data);
      if (result.code === 1) {
        this.$Message.success("表结构创建成功!");
      } else {
        this.$Message.errMsg({
          content: result.errMsg,
          duration: 5
        });
      }
      this.modal = false; //关闭当前modal
      this.$emit("func"); //关闭父级modal
    }

    
  }
};
</script>
